<template>
  <div class="home">
    <h1>主页</h1>
    <el-button type="primary" @click="gotoTest">测试页</el-button>
    <el-button type="primary" @click="gotoAbout">关于页</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getData } from '../api/table'

export default defineComponent({
  name: 'Home',
  components: {},
  setup() {
    //router是全局路由对象，route= userRoute()是当前路由对象
    let router = useRouter()
    const state = reactive({
      currentPage: 1,
      limit: 10
    })
    const getDataList = async () => {
      try {
        let params = {
          page: state.currentPage,
          limit: state.limit
        }
        let res = await getData(params)
        console.log(res)
      } catch (error) {
        console.log(error);
      }
    }
    onMounted(() => {
      getDataList()
    })
    const methods = {
      gotoTest: () => {
        console.log(111)
        router.push({
          //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定
          path: '/test',
          query: {
            num: 1
          }
          // name:'Test',
          // params:{
          //   num:1
          // }
        })
      },
      gotoAbout: () => {
        console.log(222)
        router.push({
          //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定
          path: '/about',
          query: {
            num: 1
          }
          // name:'About',
          // params:{
          //   num:1
          // }
        })
      }
    }
    return {
      ...toRefs(state),
      ...methods
    }
  }
})
</script>

